<!-- Copyright 2018 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">

<link rel="import" href="../../components/oobe_a11y_option.html">
<link rel="import" href="../../components/oobe_cr_lottie.html">
<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/buttons/oobe_back_button.html">
<link rel="import" href="../../components/buttons/oobe_icon_button.html">
<link rel="import" href="../../components/buttons/oobe_text_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">


<dom-module id="marketing-opt-in-element">
  <template>
    <style include="oobe-dialog-host-styles">
      #legalFooter {
        margin-top: 20px;
      }
      :host-context([orientation=vertical ]) #contentArea {
        justify-content: center;
      }

      :host {
        --marketing-opt-in-dialog-list-item-border: 1px solid var(--google-grey-200);
        --oobe-a11y-dialog-list-item-border: 1px solid var(--google-grey-200);
        --marketing-opt-in-row-height: 50px;
        --marketing-opt-in-line-height: 20px;
      }

      .marketing-animation-content {
        height: 95%;
        /* Lower the animation a bit to make it look more centered. */
        margin-top: 20px;
        width: 100%;
      }

      .legal-info {
        color: var(--google-grey-700);
      }

      #toggleRow {
        border-bottom: var(--marketing-opt-in-dialog-list-item-border);
        border-top: var(--marketing-opt-in-dialog-list-item-border);
        color: var(--google-grey-900);
        margin-top: 20px;
      }

      /* Keep the text in the toggle row aligned to the left/right in
         LTR/RTL languages. */
      #chromebookUpdatesOptionLabel {
        text-align: initial;
      }

      #toggleRowIcon,
      #chromebookUpdatesOptionLabel,
      #chromebookUpdatesOption {
        align-self: flex-start;
        margin-bottom: 10px;
        margin-top: 10px;
      }

      #toggleRowIcon {
        --iron-icon-height: 20px;
        --iron-icon-width: 20px;
        --iron-icon-fill-color: var(--google-blue-600);
        padding-inline-end: 16px;
      }

      #googleUrl {
        color: var(--google-blue-600);
      }

      #finalAccessibilityPage oobe-a11y-option {
        border-top: var(--oobe-a11y-dialog-list-item-border);
        min-height: 64px;
      }

      #finalAccessibilityPage oobe-a11y-option:last-of-type {
        border-bottom: var(--oobe-a11y-dialog-list-item-border);
      }
    </style>
    <oobe-adaptive-dialog id="marketingOptInOverviewDialog" role="dialog"
        for-step="overview"
        aria-label$="[[i18nDynamic(locale, 'marketingOptInScreenTitle')]]"
        aria-describedby="marketing-opt-in-subtitle">
      <iron-icon slot="icon" icon="oobe-32:checkmark">
      </iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'marketingOptInScreenTitle')]]
      </h1>
      <div slot="subtitle">
        <!-- No marketing opt in -->
        <div hidden="[[marketingOptInVisible_]]">
          [[i18nDynamic(locale, 'marketingOptInScreenSubtitleWithDeviceName')]]
        </div>
        <!-- Marketing opt in -->
        <div hidden="[[!marketingOptInVisible_]]">
          [[i18nDynamic(locale, 'marketingOptInScreenSubtitle')]]
        </div>

        <!-- Toggle row -->
        <div class="layout horizontal center"
            hidden="[[!marketingOptInVisible_]]"
            id="toggleRow">
          <iron-icon id="toggleRowIcon" icon="oobe-32:chromebook"></iron-icon>
          <div id="chromebookUpdatesOptionLabel" class="flex layout vertical"
              aria-hidden="true">
            <div>
              [[i18nDynamic(locale, 'marketingOptInGetChromebookUpdates')]]
            </div>
            <div class="legal-info">
              [[i18nDynamic(locale, 'marketingOptInScreenUnsubscribeLong')]]
            </div>
          </div>
          <cr-toggle id="chromebookUpdatesOption" checked
              aria-labelledby="chromebookUpdatesOptionLabel">
          </cr-toggle>
        </div>

        <!-- Legal footer  -->
        <div id="legalFooter" hidden="[[!hasLegalFooter_]]" class="legal-info">
          <div>
            Google LLC, 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA
          </div>
          <div id="googleUrl">www.google.com</div>
        </div>
      </div>

      <div id="contentArea" slot="content" class="layout flex vertical">
        <!-- Animation -->
        <div class="marketing-animation-content">
          <oobe-cr-lottie id="animation"
              animation-url="animations/all_set.json" singleLoop="true">
          </oobe-cr-lottie>
        </div>
      </div>
      <oobe-icon-button slot="bottom-buttons"
          hidden="[[!isA11ySettingsButtonVisible_]]"
          id="marketing-opt-in-accessibility-button"
          on-click="onToggleAccessibilityPage_"
          icon1x="oobe-32:accessibility"
          icon2x="oobe-32:accessibility"
          text-key="marketingOptInA11yButtonLabel">
      </oobe-icon-button>
      <oobe-text-button slot="bottom-buttons"
          on-click="onGetStarted_" class="focus-on-show"
          inverse text-key="marketingOptInScreenAllSet"
          id="marketing-opt-in-next-button">
      </oobe-text-button>
    </oobe-adaptive-dialog>

    <oobe-adaptive-dialog id="finalAccessibilityPage" role="dialog"
        for-step="accessibility"
        aria-label$="[[i18nDynamic(locale, 'finalA11yPageTitle')]]">
      <iron-icon slot="icon" icon="oobe-32:accessibility">
      </iron-icon>
      <h1 slot="title">
        [[i18nDynamic(locale, 'finalA11yPageTitle')]]
      </h1>
      <div slot="content" class="layout vertical">
        <oobe-a11y-option id="a11yNavButtonToggle"
            on-change="onA11yNavButtonsSettingChanged_">
          <span slot="title">
            [[i18nDynamic(locale, 'finalA11yPageNavButtonSettingTitle')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'finalA11yPageNavButtonSettingDescription')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'finalA11yPageNavButtonSettingDescription')]]
          </span>
        </oobe-a11y-option>
      </div>
      <div slot="back-navigation">
        <oobe-back-button on-click="onToggleAccessibilityPage_"
            id="final-accessibility-back-button"></oobe-back-button>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button on-click="onGetStarted_" class="focus-on-show"
            id="final-accessibility-next-button" inverse
            text-key="finalA11yPageDoneButtonTitle">
        </oobe-text-button>
      </div>
    </oobe-adaptive-dialog>
  </template>
  <script src="marketing_opt_in.js"></script>
</dom-module>
